<script setup lang="ts">
import CloseBtn from './CloseBtn.vue';

const props = defineProps<{
  title?: string;
  headerClass?: string;
  bodyClass?: string;
  footerClass?: string;
}>();
const emits = defineEmits<{
  close: [];
}>();
</script>

<template>
  <div class="pointer-events-auto relative flex flex-col overflow-hidden bg-sys-layer-d">
    <CloseBtn class="right-5 top-4.5 !absolute" @click="emits('close')" />

    <div
      v-if="props.title || $slots.header"
      class="px-5 py-4 text-lg font-semibold -mb-4" :class="[props.headerClass]"
      u:lt-mobile="px-4"
    >
      <slot name="header">
        <div>{{ props.title }}</div>
      </slot>
    </div>

    <div
      class="my-4 flex-1 overflow-y-auto px-5" :class="[props.bodyClass]"
      u:lt-mobile="px-4"
    >
      <slot />
    </div>

    <div
      v-if="$slots.header"
      class="px-5 py-4 -mt-4" :class="[props.footerClass]"
      u:lt-mobile="px-4"
    >
      <slot name="footer" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ant-modal-content {
  padding: 0;
  background-color: theme('colors.sys.layer.d');
  pointer-events: auto;
  border-radius: 0;
}
</style>
